<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link crossorigin="anonymous"
        integrity="sha512-tYEXI+QfJ9/v19Wz9l7B8b2bZTX+tlX0OPSiag0i5n85X7UrATZfhDznschpKjgt5EjESWO6qavvJiB8DELZsg=="
        href="https://lib.baomitu.com/layui/2.9.3/css/layui.min.css" rel="stylesheet">
    <script crossorigin="anonymous"
        integrity="sha512-Xah0A/Ufi1f3WtTxykn3LWwTjuRddG/p+2a5oF0Vm0GdYCsAxHrrnVFCo5uk3dIaywtRo6E2FBDeFnNjSoegoQ=="
        src="https://lib.baomitu.com/layui/2.9.3/layui.min.js"></script>
    <script crossorigin="anonymous" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
    <div id="table_list">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
    <script type="text/html" id="barDemo">
        <div class="layui-clear-space">
          <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
          <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="delete">删除</a>
        </div>
    </script>

    <style>
        html,
        body {
            height: 100%;
        }
    </style>

    <script>
        layui.use(['table', 'dropdown'], function () {
            var table = layui.table;
            var dropdown = layui.dropdown;

            const COLS_CONFIG = [
                { fixed: 'left', title: 'ID', field: 'id', width: 80, sort: true },
                { title: '负责人姓名', field: 'chargeName', width: 180, expandedWidth: 260 },

                { field: 'chargePhoneNumber', title: '负责人手机号', width: 120 },
                { field: 'address', title: '地址', hide: 0, minWidth: 260, expandedWidth: 260 },

                { fixed: 'right', title: '操作', width: 134, minWidth: 125, toolbar: '#barDemo' }
            ]

            // 创建渲染实例
            table.render({
                elem: '#test',
                url: '/Work/GetSupplierList',

                // parseData: function (res) { // res 即为原始返回的数据
                //     return {
                //         "code": 0, // 解析接口状态
                //         "msg": 0, // 解析提示文本
                //         "count": res.length, // 解析数据长度
                //         "data": res // 解析数据列表
                //     };
                // },
                height: 'full-30',
                css: [ // 重设当前表格样式
                    '.layui-table-tool-temp{padding-right: 145px;}'
                ].join(''),
                cellMinWidth: 80,
                page: true,
                cols: [COLS_CONFIG],
                done: function () {
                    var id = this.id;
                },
                error: function (res, msg) {
                    console.log("render error:", res, msg)
                },

                page: false, // 是否显示分页
                limits: [5, 10, 15],
                limit: 5 // 每页默认显示的数量
            });


            function refresh() {
                table.reload('test', {
                    where: {
                    },
                    scrollPos: true,
                })
            }

            // 触发单元格工具事件
            table.on('tool(test)', function (obj) { // 双击 toolDouble
                var data = obj.data; // 获得当前行数据

                if (obj.event === 'edit') {
                    // data.id

                } else if (obj.event === 'delete') {
                    layer.confirm('真的删除货源[id:' + data.id + ']吗?', function (index) {
                        var url = "/Work/DeleteSupplier";
                        var postdata = {
                            id: data.id
                        };
                        $.post(url, postdata, function (resultdata, status) {
                            if (resultdata.code == 0) {
                                layer.msg("删除成功");
                                refresh();
                                layer.close(index);
                            } else {
                                layer.msg("删除失败: " + resultdata.msg);
                            }
                        });

                    });
                }
            });


        });
    </script>
</body>

</html>